<!--
 * @Description: 
 * @Author: yyh
 * @Date: 2021-09-16 14:32:16
 * @LastEditors: yyh
 * @LastEditTime: 2021-09-23 15:32:37
-->
<template>
  <div class="home">
    <!-- 头部 -->
    <Header></Header>
    <!-- 体部 -->
    <div class="content">
      <div class="wrapper">
        <!-- 轮播图 -->
        <div class="swiper">
          <!-- 跑马灯 插件 -->
          <el-carousel height="260px">
            <!-- 循环遍历swipers数组 显示对应的数据 -->
            <el-carousel-item v-for="item in swipers" :key="item.id">
              <img :src="item.url" alt="" />
            </el-carousel-item>
          </el-carousel>
        </div>
        <!-- 板块 -->
        <div class="plates">
          <div class="plate" v-for="item in plateData" :key="item.id">
            <!-- 顶部 -->
            <div class="header">
              <div class="title">{{ item.category.name }}</div>
              <div class="more" @click="toList(item.category)">更多&gt;</div>
            </div>
            <!-- 列表区域 -->
            <ul class="list" v-if="item.aritcle.length > 0">
              <li v-for="artItem in item.aritcle" :key="artItem.id">
                <div @click="toArticle(artItem)">{{ artItem.title }}</div>
              </li>
            </ul>
            <ul class="list" v-else>
              <li>暂无数据</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <!-- 尾部 -->
    <Footer></Footer>
  </div>
</template>

<script>
// 1.引入axios的get请求
import { get } from "../utils/request";
// 引入Header组件
import Header from "./components/Header.vue";
import Footer from "./components/Footer.vue";
export default {
  // 注册组件
  components: {
    //1.引入所需的组件
    //2.注册
    //Header:Header
    //在ES6中 如果key和value同名 直接写一个属性就可以了
    Header,
    Footer,
  },
  data() {
    return {
      //轮播图的数据
      swipers: [],
      // 板块数据
      plateData: {},
    };
  },
  methods: {
    // 2.发送请求获取对应的数据
    // 获取轮播图的数据
    getSwipersData() {
      //发送get请求
      get("/index/carousel/findAll").then((res) => {
        // console.log(res.data);
        //赋值
        this.swipers = res.data;
      });
    },
    //获取板块所需的数据
    getPlateData() {
      get("/index/article/findCategoryArticles").then((res) => {
        // console.log(res.data);
        this.plateData = res.data;
      });
    },
    //跳转到列表页
    toList(category) {
      //路由跳转
      this.$router.push({
        //要跳转的路径
        path: "/list",
        //要传递的参数
        query: category,
      });
    },
    // 跳转到文章页面
    toArticle(artItem) {
      this.$router.push({
        path: "/article",
        query: artItem,
      });
    },
    // 模拟 get有参请求
    // test(){
    //   get('xxxx', {name:'copyright'})
    // }
  },
  created() {
    //3.页面加载时自执行获取轮播图数据的方法 发送请求
    this.getSwipersData();
    this.getPlateData();
  },
};
</script>

<style lang="scss" scoped>
// 体部样式
.content {
  // height: 500px;
  background-color: #f5f7ff;
  .wrapper {
    //轮播图样式
    .swiper {
      img {
        width: 100%;
      }
    }
    //板块区域
    .plates {
      display: flex;
      flex-wrap: wrap;
      padding: 10px;
      // 每一个板块的样式
      .plate {
        width: 30%;
        background-color: white;
        margin: 10px;
        padding: 10px;
        height: 240px;
        box-sizing: border-box;
        //板块头部样式
        .header {
          display: flex;
          justify-content: space-between;
          .title {
            color: #31499a;
            font-size: 18px;
            font-weight: bold;
          }
          .more {
            color: #999;
            cursor: pointer;
          }
        }
        //板块列表样式
        .list {
          li {
            div {
              line-height: 2em;
              overflow: hidden;
              // 单行文本溢出显示省略号
              text-overflow: ellipsis;
              white-space: nowrap;
              cursor: pointer;
            }
          }
        }
      }
    }
  }
}
</style>